<template>
	<view>
		<u-navbar title="订单详情" :fixed="false" bgColor="transparent">
			<view class="flex" slot="left">
				<view class="nav-left flex">
					<u-icon name="arrow-left" size="24" @click="back"></u-icon>
					<u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
					<u-icon name="home" size="24" @click="toHome"></u-icon>
				</view>
			</view>
		</u-navbar>
		<view class="m30">
			<view class="bgFff radius30 p30">
				<view class="flex flex-start">
					<image src="../../static/images/order/icon1.png" mode="" style="width: 40rpx;height: 40rpx;">
					</image>
					<view class="ml20">
						<view class="c343 f28 bold">{{address.userAddr}} - {{address.houseNumber}}</view>
						<view class="c343 f26 mt10">
							<text>{{address.realName}}</text>
							<text class="ml20">{{address.phone}}</text>
						</view>
					</view>
				</view>
				<u-line color="#eee" margin="30rpx 0" v-if="detail.orderType == 1"></u-line>
				<view class="flex-jus" v-if="detail.orderType == 1">
					<view class="flex">
						<image src="../../static/images/order/clock2.png" mode="" style="width: 30rpx;height: 30rpx;">
						</image>
						<text class="f24 c343 ml10 mr10">期望上门时间</text>
					</view>
					<view class="f26 c343">{{detail.timePeriod}}</view>
				</view>
			</view>
			<u-gap height="10"></u-gap>
			<view class="bgFff radius30 p30">
				<view>
					<view class="flex flex-start" @click="detail.orderType == 1?nologinJump('/subpage/housekeeping/detail?id=' + detail.orderPro.id):nologinJump('/subpage/lock/index?id=' + detail.orderPro.id)">
						<u-image :src="api_host + pro.icon" mode="" width="76px" height="76px" radius="5"></u-image>
						<view class="p10 ml10 flex1">
							<view class="c343 f28 bold">{{pro.proName}}</view>
							<u-gap height="10"></u-gap>
							<view>
								<view class="flex-jus f24 c999 mb10" v-for="(item,index) in sku" :key="index">
									<text>{{item.name}} x{{item.buyCount}}</text>
									<text>¥ {{item.price}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="mt20" v-if="detail.remark">
					<view class="c343 f26">备注</view>
					<view class="bgF7 p20 radiusBox mt10 mb20">
						<view class="f24 c343">
							{{detail.remark}}
						</view>
					</view>
				</view>
				<view class="mt20">
					<view class="flex-jus f26 c343 mb10">
						<text>服务总价</text>
						<text>¥ {{detail.orderPrice + (detail.discountPrice?Number(detail.discountPrice):0)}}</text>
					</view>
					<view class="flex-jus f26 c343" v-if="detail.coupId">
						<text>使用优惠</text>
						<text>{{detail.coupon.name}} -¥ {{detail.discountPrice || '0.00'}}</text>
					</view>
				</view>
				<u-gap height="30"></u-gap>
				<view class="flex-jus flex">
					<view class="">
						<text class="c343 f28 bold" v-if="detail.orderStatus != 11">{{detail.orderStatus == 0?'应付款':'实付款'}}</text>
					</view>
					<view class="cyellow ml10">
						<text class="f24">￥</text>
						<text class="f28 bold">{{detail.orderPrice}}</text>
					</view>
				</view>
				<u-line color="#eee" margin="20rpx 0"></u-line>
				<!-- <view class="f32 c343 bold" v-if="detail.sceneImages">服务成果</view>
				<view class="mt20" v-if="detail.sceneImages">
					<view class="flex">
						<view class="m10" v-for="(img,imgIndex) in detail.append_imgs" :key="imgIndex"
							@click="$utils.previewImages(imgIndex,detail.append_imgs)">
							<u-image :src="api_host + img" mode="" width="76px" height="76px" radius="5"></u-image>
						</view>
					</view>
					<u-line color="#eee" margin="20rpx 0"></u-line>
				</view> -->
				<view v-if="detail.orderAppend" class="mb20">
					<view class="bgF7 p20 radiusBox mt20 mb20">
						<view class="c343 f26 bold mb20">追加服务</view>
						<view class="f24 c343">
							{{detail.orderAppend.describe}}
						</view>
					</view>
					<view class="flex-jus">
						<text class="c343 f26 bold">{{detail.orderStatus > 3 && detail.orderStatus != 11?'实付款':'应付款'}}</text>
						<view class="cyellow">
							<text class="f24">￥</text>
							<text class="f28 bold">{{detail.orderAppend.price}}</text>
						</view>
					</view>
					<u-line color="#eee" margin="20rpx 0"></u-line>
				</view>
				<view class="f24 c999 mb10">订单号：{{detail.orderCode}}</view>
				<!-- <view class="f24 c999 mb10" v-if="detail.status > 1">交易号：HXSJZ2024042509571</view> -->
				<view class="f24 c999 mb10" v-if="detail.orderStatus > 0 && detail.orderStatus != 11">
					支付时间：{{detail.payTime}}</view>
				<view class="f24 c999 mb10">创建时间：{{detail.createTime}}</view>
				<view class="f24 c999" v-if="detail.orderStatus >= 4 && detail.orderStatus != 11">
					完成时间：{{detail.finishTime}}</view>
				<u-gap height="30"></u-gap>
				<view v-if="detail.orderStatus <= 2">
					<view class="flex-jus">
						<view class="flex" v-if="detail.orderStatus < 2">
							<view class="mr20">
								<u-button shape="circle" color="#fff" @click="cancelOrderbtn"
									:customStyle="{'color':'#34314F','border':'1px solid #ddd','height':'70rpx','fontSize':'24rpx'}">
									取消订单
								</u-button>
							</view>
							<view>
								<u-button shape="circle" color="#fff"
									@click="openUrl('/subpage/me/addressList?type=order&order_id='+id)"
									:customStyle="{'color':'#34314F','border':'1px solid #ddd','height':'70rpx','fontSize':'24rpx'}">
									修改地址
								</u-button>
							</view>
						</view>
						<view v-if="detail.orderStatus == 0">
							<u-button shape="circle" color="#FFDE6D" @click="payOrder()"
								:customStyle="{'color':'#34314F','border':'1px solid #FFDE6D','height':'80rpx','fontSize':'24rpx'}">
								支付
							</u-button>
						</view>
						<view class="textR" v-if="detail.orderStatus == 1">
							<view class="f26 c343" v-if="detail.estimateTime">
								<view>预计上门时间</view>
								<view>{{detail.estimateTime}}</view>
							</view>
							<view v-else class="f26 c343">
								平台正在分配工作人员
							</view>
						</view>
						<view class="textR" v-if="detail.orderStatus == 2">
							<view class="f24 c999">工作人员已出发</view>
							<view class="f26 c343">{{detail.estimateTime?('预计上门时间:'+detail.estimateTime):'等待服务'}}</view>
						</view>
					</view>
					<view class="jus-right flex mt20" v-if="detail.orderStatus == 0">
						<image src="../../static/images/order/clock.png" mode="" style="width: 30rpx;height: 30rpx;">
						</image>
						<text class="f24 c999 ml10 mr10">剩余支付时间</text>
						<view class="ml10 order_time">
							<u-count-down :time="detail.downTimes" format="HH:mm:ss"
								@finish="getOrderdetail()"></u-count-down>
						</view>
					</view>
				</view>
				<view v-if="detail.orderStatus == 3">
					<view class="flex-au">
						<!-- <u-button shape="circle" color="#FFDE6D" @click="payOrderappend()" v-if="detail.orderAppend"
							:customStyle="{'color':'#34314F','border':'1px solid #FFDE6D','height':'70rpx','fontSize':'24rpx','width':'40%'}">
							支付追加服务
						</u-button>
						<u-button shape="circle" color="#FFDE6D" @click="advanceStatusbtn()" v-else
							:customStyle="{'color':'#34314F','border':'1px solid #FFDE6D','height':'70rpx','fontSize':'24rpx','width':'40%'}">
							确认成果
						</u-button> -->
						<u-button shape="circle" color="#FFDE6D" @click="nologinJump('/subpage/order/serviceResult?id='+id)"
							:customStyle="{'color':'#34314F','border':'1px solid #FFDE6D','height':'80rpx','fontSize':'32rpx','width':'50%','fontWeight':'bold'}">
							确认成果
						</u-button>
					</view>
				</view>
				<view v-if="detail.orderStatus == 4">
					<view class="flex-jus">
						<view class="flex" v-if="detail.orderType == 1">
							<view class="mr20" v-if="detail.isAfter == 0">
								<u-button shape="circle" color="#fff" @click="nologinJump('/subpage/service/apply?id='+id)"
									:customStyle="{'color':'#34314F','border':'1px solid #ddd','height':'80rpx','fontSize':'24rpx'}">
									申请售后
								</u-button>
							</view>
							<view v-if="detail.isComm == 0">
								<u-button shape="circle" color="#fff" @click="nologinJump('/subpage/order/evaluate?id='+id)"
									:customStyle="{'color':'#34314F','border':'1px solid #ddd','height':'80rpx','fontSize':'24rpx'}">
									去评价
								</u-button>
							</view>
						</view>
						<view v-else></view>
						<view>
							<u-button shape="circle" color="#FFDE6D"
								@click="nologinJump('/subpage/order/serviceResult?id='+id)"
								:customStyle="{'color':'#34314F','border':'1px solid #FFDE6D','height':'80rpx','fontSize':'24rpx'}">
								服务成果
							</u-button>
						</view>
					</view>
				</view>
				<view class="flex-au" v-if="detail.orderStatus == 11">
					<u-button shape="circle" color="#FFDE6D"
						@click="detail.orderType == 1?nologinJump('/subpage/housekeeping/detail?id=' + detail.orderPro.id):nologinJump('/subpage/lock/index?id=' + detail.orderPro.id)"
						:customStyle="{'color':'#34314F','border':'1px solid #FFDE6D','height':'80rpx','fontSize':'32rpx','width':'50%','fontWeight':'bold'}">
						再次购买
					</u-button>
				</view>
			</view>
			<u-gap height="50"></u-gap>
			<view v-if="detail.providerPhone" class="textC" @click="maketel(detail.providerPhone)">
				<image src="../static/housekeeping/kf.png" mode="widthFix" style="width:30%;"></image>
			</view>
			<view v-else class="textC" @click="maketel(config.phone)">
				<image src="../static/housekeeping/kf.png" mode="widthFix" style="width:30%;"></image>
			</view>
			<u-gap height="30"></u-gap>
		</view>
		<u-modal :show="show_action" title="确认完成!" :content="detail.orderType == 1?'感谢您的支持，请对本次服务作出评价':'感谢您的支持'">
			<view class="" slot="confirmButton">
				<view class="flex-jus" v-if="detail.orderType == 1">
					<view class="flex1">
						<view class="mr20">
							<u-button color="#f7f7f7" :customStyle="{'color':'#111','height':'80rpx'}" shape="circle"
								@click="show_action = false">取消</u-button>
						</view>
					</view>
					<view class="flex1">
						<view class="ml20">
							<u-button color="#FFDE6D" :customStyle="{'color':'#111','height':'80rpx'}" shape="circle"
								@click="openUrl('/subpage/order/evaluate?id='+id)">去评价</u-button>
						</view>
					</view>
				</view>
				<view class="" v-if="detail.orderType == 2">
					<view class="flex-au">
						<u-button color="#FFDE6D" :customStyle="{'color':'#111','height':'80rpx','width':'50%'}"
							shape="circle" @click="show_action = false">确定</u-button>
					</view>
				</view>
			</view>

		</u-modal>
	</view>
</template>

<script>
	import appInfo from '@/common/appInfo.js'
	import {
		getOrderdetail,
		cancelOrder,
		payOrder,
		advanceStatus,
		payOrderappend
	} from '@/common/api_order.js'
	export default {
		name: '',
		data() {
			return {
				id: '',
				show_action: false,
				address: {},
				pro: {},
				sku: [],
				detail: {}
			}
		},
		onLoad(option) {
			this.id = option.id
		},
		onShow() {
			if (this.id) {
				this.getOrderdetail()
			}
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			toHome() {
				uni.reLaunch({
					url: '/pages/index/index'
				})
			},
			async getOrderdetail() {
				uni.showLoading({
					mask: true
				})
				const res = await getOrderdetail({
					id: this.id
				})
				if (res.code == 200) {
					this.detail = res.data
					const {
						userAddr,
						orderDetails,
						orderPro,
						sceneImages
					} = this.detail
					this.detail.append_imgs = sceneImages?sceneImages.split(','):[]
					this.address = userAddr
					this.sku = orderDetails
					this.pro = orderPro
					if (this.detail.orderStatus == 0) {
						let nowTimes = new Date().getTime()
						let createTime = this.detail.createTime.replace(/-/g, "/")
						let orderTimes = new Date(createTime).getTime()
						let times30 = 30 * 60 * 1000
						this.detail.downTimes = orderTimes + times30 - nowTimes
					}
				}
				uni.hideLoading()
			},
			async cancelOrderbtn() {
				const that = this;
				uni.showModal({
					title: '确定取消订单吗？',
					confirmText: '确定',
					success(res) {
						if (res.confirm) {
							that.cancelOrder()
						}
					}
				})
			},
			async cancelOrder(id) {
				uni.showLoading({
					mask: true
				})
				const res = await cancelOrder({
					id: this.id
				})
				if (res.code == 200) {
					this.getOrderdetail()
				}
				uni.hideLoading()
			},
			async advanceStatusbtn(item) {
				const that = this
				uni.showModal({
					title: '确定完成订单吗？',
					confirmText: '确定',
					success(res) {
						if (res.confirm) {
							that.advanceStatus()
						}
					}
				})
			},
			async advanceStatus() {
				uni.showLoading({
					mask: true
				})
				const res = await advanceStatus({
					id: this.id
				})
				if (res.code == 200) {
					this.getOrderdetail()
					this.show_action = true
				}
				uni.hideLoading()
			},
			async payOrderappend(item) {
				const that = this
				uni.showLoading({
					mask: true
				})
				const res = await payOrderappend({
					code: this.detail.orderAppend.appendCode
				})
				if (res.code == 200) {
					let config = res.data
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: config.timeStamp.toString(),
						nonceStr: config.nonceStr,
						package: 'prepay_id=' + config.package.prepay_id,
						signType: config.signType,
						paySign: config.paySign,
						success() {
							uni.hideLoading()
							uni.showToast({
								title: '支付成功',
								icon: 'success'
							})
							setTimeout(() => {
								that.show_action = true
								that.getOrderdetail()
							}, 800)
						},
						fail() {
							uni.hideLoading()
							uni.showToast({
								title: '支付失败',
								icon: 'error'
							})
						}
					})
				}
				uni.hideLoading()
			},
			async payOrder() {
				const that = this
				// #ifdef MP-WEIXIN
				let messageRes = await this.$utils.messageSubscriptionAuthorization(appInfo.tmplIds.order);
				// #endif
				uni.showLoading({
					mask: true,
					title: '正在支付中...'
				})
				const res = await payOrder({
					id: this.id
				})
				if (res.code == 200) {
					let config = res.data
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: config.timeStamp.toString(),
						nonceStr: config.nonceStr,
						package: 'prepay_id=' + config.package.prepay_id,
						signType: config.signType,
						paySign: config.paySign,
						success() {
							uni.hideLoading()
							uni.showToast({
								title: '支付成功',
								icon: 'success'
							})
							setTimeout(() => {
								that.getOrderdetail()
							}, 800)
						},
						fail() {
							uni.hideLoading()
							uni.showToast({
								title: '支付失败',
								icon: 'error'
							})
						}
					})
				}
				uni.hideLoading()

			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FEF4E8;
	}
	.nav-left {
		border-radius: 50rpx;
		padding: 10rpx 20rpx;
		background-color: rgba(#fff, 0.8);
	}
</style>